import type { ButtonShape, ButtonSize, ButtonVariant } from "@/components/Button";
import Button from "@/components/Button";
import Panel from "@/components/Panel";

const shapes: ButtonShape[] = ["round", "circle", "default"];
const variants: ButtonVariant[] = ["primary", "secondary", "danger", "outline"];
const sizes: ButtonSize[] = ["sm", "md", "lg"];

export default function Buttons() {
  return (
    <Panel class="bg-white">
      {{
        title: () => "Buttons",
        default: () => (
          <div class="flex flex-col gap-4">
            <div class="flex gap-4">
              {shapes.map((shape) => (
                <Button shape={shape} key={shape}>
                  {shape}
                </Button>
              ))}
            </div>
            <div class="flex gap-4">
              {variants.map((variant) => (
                <Button variant={variant} key={variant}>
                  {variant}
                </Button>
              ))}
            </div>
            <div class="flex gap-4">
              {variants.map((variant) => (
                <Button variant={variant} key={variant} disabled>
                  disabled
                </Button>
              ))}
            </div>
            <div class="flex gap-4 ">
              {sizes.map((size) => (
                <Button size={size} key={size}>
                  {size}
                </Button>
              ))}
            </div>
          </div>
        ),
      }}
    </Panel>
  );
}
